<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Element Plus 用户信息表单</title>
  <!-- 引入 Element Plus 样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
  <!-- 引入 Vue 3 -->
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <!-- 引入 Element Plus -->
  <script src="https://unpkg.com/element-plus"></script>
  <style>
    .app-container {
      padding: 20px;
    }
    .form-dialog .el-form-item {
      margin-bottom: 20px;
    }
    .form-dialog .el-date-editor {
      width: 100%;
    }
    .dialog-footer {
      text-align: right;
      padding-top: 20px;
    }
  </style>
</head>
<body>
  <div id="app" class="app-container">
    <el-button type="primary" @click="openAddDialog">新增用户</el-button>
    
    <!-- 用户信息对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="isEdit ? '编辑用户' : '新增用户'"
      width="800px"
      class="form-dialog"
    >
      <el-form
        ref="userFormRef"
        :model="userForm"
        :rules="formRules"
        label-width="100px"
      >
        <el-row :gutter="20">
          <!-- 第一行 -->
          <el-col :span="12">
            <el-form-item label="登录账号" prop="username">
              <el-input v-model="userForm.username" placeholder="请输入登录账号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="姓名" prop="realName">
              <el-input v-model="userForm.realName" placeholder="请输入姓名" />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <!-- 第二行 -->
          <el-col :span="12">
            <el-form-item label="角色类型" prop="roleType">
              <el-select v-model="userForm.roleType" placeholder="请选择角色类型" @change="handleRoleTypeChange">
                <el-option label="系统用户" value="system" />
                <el-option label="非系统用户" value="non-system" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="角色名称" prop="roleName">
              <el-input v-model="userForm.roleName" placeholder="请输入角色名称" />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <!-- 第三行 -->
          <el-col :span="12">
            <el-form-item label="出生日期" prop="birthDate">
              <el-date-picker
                v-model="userForm.birthDate"
                type="datetime"
                placeholder="请选择出生日期"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别" prop="gender">
              <el-radio-group v-model="userForm.gender">
                <el-radio label="male">男</el-radio>
                <el-radio label="female">女</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <!-- 第四行 -->
          <el-col :span="12">
            <el-form-item label="状态" prop="status">
              <el-radio-group v-model="userForm.status">
                <el-radio label="normal">正常</el-radio>
                <el-radio label="disabled">禁用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号" prop="phone">
              <el-input v-model="userForm.phone" placeholder="请输入手机号" />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <!-- 第五行 -->
          <el-col :span="12">
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="userForm.email" placeholder="请输入邮箱" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="组织机构" prop="organization">
              <el-select v-model="userForm.organization" placeholder="请选择组织机构">
                <el-option label="大学" value="university" />
                <el-option label="中学" value="middle-school" />
                <el-option label="小学" value="primary-school" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSubmit">提交</el-button>
        </span>
      </template>
    </el-dialog>
  </div>

  <script>
    const { createApp, ref, reactive, onMounted } = Vue;
    const { ElMessage } = ElementPlus;
    
    createApp({
      setup() {
        const dialogVisible = ref(false);
        const isEdit = ref(false);
        const userFormRef = ref();
        
        // 表单数据
        const userForm = reactive({
          username: '',
          realName: '',
          roleType: '',
          roleName: '',
          birthDate: '',
          gender: 'male',
          status: 'normal',
          phone: '',
          email: '',
          organization: ''
        });
        
        // 验证规则
        const formRules = {
          username: [
            { required: true, message: '请输入登录账号', trigger: ['blur', 'change'] },
            {
              pattern: /^[A-Za-z0-9`~!@#$%^&*()_\-+={}[\]|\\:;"'<>,.?/]*$/,
              message: '只能输入数字、英文和特殊字符，不能有空格',
              trigger: ['blur', 'change'],
            },
          ],
          realName: [{ required: true, message: '请输入姓名', trigger: ['blur', 'change'] }],
          roleType: [{ required: true, message: '请选择角色类型', trigger: ['blur', 'change'] }],
          roleName: [{ required: true, message: '请输入角色名称', trigger: ['blur', 'change'] }],
          birthDate: [{ required: true, message: '请选择出生日期', trigger: ['blur', 'change'] }],
          gender: [{ required: true, message: '请选择性别', trigger: ['blur', 'change'] }],
          status: [{ required: true, message: '请选择状态', trigger: ['blur', 'change'] }],
          phone: [
            {
              pattern: /^1[3-9]\d{9}$/,
              message: '请输入正确的手机号码',
              trigger: ['blur', 'change'],
            },
          ],
          email: [
            {
              pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
              message: '请输入正确的邮箱地址',
              trigger: ['blur', 'change'],
            },
          ]
        };
        
        // 打开新增对话框
        const openAddDialog = () => {
          isEdit.value = false;
          resetForm();
          dialogVisible.value = true;
        };
        
        // 打开编辑对话框
        const openEditDialog = (userData) => {
          isEdit.value = true;
          resetForm();
          Object.assign(userForm, userData);
          dialogVisible.value = true;
        };
        
        // 重置表单
        const resetForm = () => {
          if (userFormRef.value) {
            userFormRef.value.resetFields();
          }
        };
        
        // 角色类型改变时清空角色名称
        const handleRoleTypeChange = () => {
          userForm.roleName = '';
        };
        
        // 提交表单
        const handleSubmit = () => {
          userFormRef.value.validate((valid) => {
            if (valid) {
              // 这里可以添加提交逻辑
              ElMessage.success('表单验证成功，可以提交数据');
              console.log('表单数据:', userForm);
              dialogVisible.value = false;
            } else {
              ElMessage.error('请检查表单数据');
              return false;
            }
          });
        };
        
        // 暴露方法给父组件调用
        const exposeMethods = {
          openAddDialog,
          openEditDialog
        };
        
        return {
          dialogVisible,
          isEdit,
          userFormRef,
          userForm,
          formRules,
          openAddDialog,
          handleRoleTypeChange,
          handleSubmit,
          ...exposeMethods
        };
      }
    }).use(ElementPlus).mount('#app');
  </script>
</body>
</html>